<template>
  <div class="container" v-loading="loading">
    <div class="main-top" style="display: flex;">
      <!--      轮播图-->
      <div class="carousel_chart" style="flex: 4">
        <el-carousel indicator-position="outside" height="360px">
          <el-carousel-item v-for="(item, index) in CarouselChart" :key="item.id">
            <router-link :to="{
              name:'detail',
              params:{
                  id: item.id
		        }
             }"><img :src="require('@/pages/Home/images/' + item.dishUrl)"
                 style="width: 100%;height: 100%;object-fit: cover"></router-link>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!--    散排-->
      <div class=""
           style=" width: 400px; height: 300px; flex: 6; margin-left: 30px; display: flex;flex-wrap: wrap;align-content: flex-start; ">
        <div v-for="(item, index) in CarouselChart" :key="item.id">
          <div style="width: 275px;height:140px;margin: 0px 0px 20px 62px">
            <router-link :to="{
              name:'detail',
              params:{
                  id:item.id
              }
             }"><img :src="require('@/pages/Home/images/' + item.dishUrl)"
                 style="width: 100%;height: 100%;object-fit: cover"></router-link>
          </div>
          <div class="slider-footer"
               style="width: 275px;height:20px;margin: 0px 0px 20px 62px;text-align: center;font-size: 14px;font-weight: bold">
            <p>{{ item.dishName }}</p>
          </div>
        </div>
      </div>
    </div>

    <div
        style="margin-top: 20px; width: 100%; height: 30px; display: flex; justify-content: flex-end; align-items: center;cursor: pointer"
        @click="updateOne">
      <i class="el-icon-refresh" style="font-size: 15px"></i>
      <p style="font-size: 15px">换一换</p>
    </div>

    <div class="main-bottom " style=" width: 100%; height: 360px;
 display: flex;flex-wrap: wrap;align-content: flex-start; justify-content: space-between;">
      <div v-for="(item, index) in oneDishes" :key="item.id">
        <div style="width: 275px;height:140px;margin-bottom: 20px">
          <router-link :to="{
              name:'detail',
              params:{
                  id:item.id
              }
             }"><img :src="require('@/pages/Home/images/' + item.dishUrl)" style="width: 100%;height: 100%;object-fit: cover"></router-link>
        </div>
        <div class="slider-footer"
             style="width: 275px;height:20px;text-align: center;font-size: 14px;font-weight: bold;margin: 0px 0px 20px 0px;">
          <p>{{ item.dishName }}</p>
        </div>
      </div>

      <div
          style="margin-top: 20px; width: 100%; height: 30px; display: flex; justify-content: flex-end; align-items: center; cursor: pointer"
          @click="updateTwo">
        <i class="el-icon-refresh" style="font-size: 15px"></i>
        <p style="font-size: 15px">换一换</p>
      </div>

      <div v-for="(item, index) in twoDishes" :key="item.id">
        <div style="width: 275px;height:140px;background-color: blueviolet;margin-bottom: 20px">
          <img :src="require('@/pages/Home/images/' + item.dishUrl)" style="width: 100%;height: 100%;object-fit: cover">
        </div>
        <div class="slider-footer"
             style="width: 275px;height:20px;text-align: center;font-size: 14px;font-weight: bold;margin: 0px 0px 20px 0px;">
          <p>{{ item.dishName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "@/utils/request";

export default {
  data() {
    return {
      CarouselChart: [],
      oneDishes: [],
      twoDishes: [],
      num: 0,
      loading: true
    }
  },
  methods: {
    updateOne() {
      axios.get('api/dish/findDishesAll/' + this.num, {headers: {token: localStorage.getItem('token')}})
          .then(res => {
            if (res.data.code == 1) {
              this.oneDishes = res.data.data
              console.log(this.oneDishes.length)
              if(this.oneDishes.length === 8){
                this.num += 8;
              }else {
                this.num = 0;
              }

            }
          })
          .catch(err => {
            console.log(err)
          })
    },
    updateTwo() {
      axios.get('api/dish/findDishesAll/' + this.num, {headers: {token: localStorage.getItem('token')}})
          .then(res => {
            if (res.data.code == 1) {
              this.twoDishes = res.data.data
              if(this.twoDishes.length === 8){
                this.num += 8;
              }else {
                this.num = 0;
              }
            }
          })
          .catch(err => {
            console.log(err)
          })
    }
    },
  mounted() {
    request.get('dish/getCarouselChart')
        .then(res => {
          if (res.data.code == 1) {
            this.CarouselChart = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    request.get('dish/findDishesAll/' + this.num)
        .then(res => {
          if (res.data.code == 1) {
            this.oneDishes = res.data.data
            this.twoDishes = res.data.data
            this.loading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
  }
}
</script>

<style scoped>
.container {
  width: 1160px;
  margin: 0 auto;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
